<template>
	<div class="newsinfo-container">
		
		<!-- 店铺区 -->
		<div class="header">
			<img :src="newsinfo.images[0]">
		    <div>
			  <h3 class="title">{{ newsinfo.name }}</h3>
		      <div class="discription">
			    <div>
			    	<p>营业时间: <p>
			    	<p class="businessHours">{{ newsinfo.businessHours }}</p>
			    </div>
			    <div>评论次数:{{ newsinfo.comments.length }}</div>	
		      </div>
		    </div>
		</div>
		<hr>
		<div>
			<p>电话：{{ newsinfo.phone }}</p>
			<p>地址：{{ newsinfo.address }}</p>
		</div>

		<!-- vue-preview使用区 -->
		<vue-preview :slides="slide1" @close="handleClose"></vue-preview>


		<!-- 评论区 -->
		<comments-box :newsinfo="newsinfo"></comments-box>

	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import comment from '../subcomponents/comment.vue'

	export default {
		data(){
			return{
				id:this.$route.params.id,
				newsinfo:{},
				slide1: [
                          {
                            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                          },
                          {
                            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                            alt: 'picture2',
                            title: 'Image Caption 2',
                            w: 1200,
                            h: 900
                          }
                        ],
				
			}
		},
		methods:{
			getNewsInfo(){
				//vue-resource的ajax地址不能以“/”开头
				this.$http.get(this.$route.params.cateId+"/shops?id="+this.$route.params.shopId).then((result)=>{					
					if(result.body){
						console.log(result.body);
						this.newsinfo = result.body[0];
						
					}else{
						Toast("加载轮播图失败！")
					}
				})
			},
			handleClose () {
        		console.log('close event')
      		}
		},
		created(){
			this.getNewsInfo();
		},
		components:{
			"comments-box":comment
		}
	}
</script>

<style lang="scss" scoped>
	.newsinfo-container {
		padding:0px 4px;

		/*店铺区样式*/
		.header {
			display: flex;
			justify-content:space-between;

			img {
			  width: 150px;
			  height: 100px;
			  margin-top: 10px;
		    }

		    .title {
		      font-size: 16px;
		      text-align: center;
		      margin: 15px 0px;
		      color: red;			
		    }
		    .discription {
		      font-size: 14px;
		      color: #226aff;
		      display: flex;
		      justify-content:space-between;
    
		    	.businessHours {
		    		color:red;
		    		font-size: 13px;
		    	}
		    }
		}


		
	}
</style>